<template>
  <div class="page-new-shop">
    <h2>注册成为商家</h2>
    <section>
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="门店名称"
          prop="name"
        >
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item
          label="联系电话"
          prop="tel"
        >
          <el-input v-model="ruleForm.tel" />
        </el-form-item>
        <el-form-item
          label="门店地址"
          prop="address"
        >
          <el-input v-model="ruleForm.address" />
        </el-form-item>
        <el-form-item
          label="标签"
          prop="tag"
        >
          <el-input v-model="ruleForm.tag" />
        </el-form-item>
        <el-form-item
          label="分类"
          prop="type"
        >
          <el-input v-model="ruleForm.type" />
        </el-form-item>
        <el-form-item
          label="参考价格"
          prop="cost"
        >
          <el-input v-model="ruleForm.cost" />
        </el-form-item>
        <el-form-item
          label="图片地址"
          prop="photo"
        >
          <el-input v-model="ruleForm.photo" />
        </el-form-item>
        <p class="error">
          {{ error }}
        </p>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">
            立即创建
          </el-button>
          <el-button @click="resetForm('ruleForm')">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      error: '',
      ruleForm: {
        name: '',
        tel: '',
        address: '',
        tag: '',
        type: '',
        photo: '',
        cost: '' // 参考价
      },
      rules: {
        name: [{
          required: true,
          type: 'string',
          message: '请输入商家名称',
          trigger: 'blur'
        }],
        tel: [{
          required: true,
          type: 'string',
          message: '请输入联系电话',
          trigger: 'blur'
        }],
        address: [{
          required: true,
          type: 'string',
          message: '请输入门店地址',
          trigger: 'blur'
        }],
        tag: [{
          required: true,
          type: 'string',
          message: '请输入标签',
          trigger: 'blur'
        }],
        type: [{
          required: true,
          type: 'string',
          message: '请输入分类',
          trigger: 'blur'
        }],
        cost: [{
          required: true,
          type: 'string',
          message: '请输入参考价格',
          trigger: 'blur'
        }],
        photo: [{
          required: true,
          type: 'string',
          message: '请输入图片地址',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.register(this.ruleForm)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    register(newShop) {
      newShop.city = this.$store.state.geo.position.city
      this.$axios.post('/shop/signup', newShop).then(({
        status,
        data
      }) => {
        if (status === 200) {
          if (data && data.code === 0) {
            this.$router.push('/')
          } else {
            this.error = data.msg
          }
        } else {
          this.error = `服务器出错，错误码:${status}`
        }
      })
    }
  }
}
</script>

<style lang="scss">
  @import "@/assets/css/newShop/index.scss";
</style>
